<template>
	<view>
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" :tabWidth="150" nameKey="title"></me-tabs>
		<mescroll-uni top="120"  ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback" :down="downOption" :up="upOption">
			<!--正在进行的任务-->
			<view class="task-contanier box-border" v-if="selfOrder.length>0">
				<view class="task-title">
					<view class="task-desc">进行中任务</view>
					<view class="task-more"></view>
				</view>
				<view class="task-info" v-for="(item,index) in selfOrder" @click="navgoto(item.moonlight_id)">
					<view class="task-item">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="task-detail">
							<view class="task-app">{{item.title}}</view>
							<view class="task-category" style="background-color: #fff;">{{item.cTitle}}</view>
							<view class="task-count">任务进度：{{item.quantity-item.surplus}}/{{item.quantity}}<!-- ·<text class="red-tip">无须下载</text> --></view>
						</view>
					</view>
					<view class="commission ">
						<view v-if="expire_time[index]=='等待释放'" class="timer">
							<view>{{expire_time[index]}}</view>
						</view>
						<view v-else class="timer">
							<view>正在进行中</view>
							<view class="small-size">{{expire_time[index]}}</view>
						</view>
					</view>
				</view>
			</view>
			<!--当前试玩-->
			<view class="task-contanier">
				<view class="task-title">
					<view class="task-desc">{{tabs[tabIndex].title}}</view>
					<!-- <view class="task-more">查看任务预告 ›</view> -->
				</view>
				<view class="task-info" v-for="(item,index) in tasklist" :key="index" @click="navgoto(item.id)">
					<!-- <view class="giveup">放弃过</view> -->
					<view class="task-item">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="task-detail">
							<view class="task-app">{{item.title}}</view>
							<view class="task-category">{{item.cTitle}}</view>
							<view class="task-count">任务进度：{{item.quantity-item.surplus}}/{{item.quantity}}</view>
						</view>
					</view>
					<view class="commission">
						<view class="add">+</view>
						<view class="money">{{item.arrive_price}}</view>
						<view class="yang">元</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	/**
	 * 任务大厅
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				interval:[],//定时器ID
				expire_time:[],//过期时间
				selfOrder:[],//正在进行的任务
				tabIndex: 0,
				tabs: ['全部', '注册下载', '转发分享', '游戏试玩', '其他'],
				downOption: {
					auto: true,
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
					autoShowLoading:true
				},
				upOption: {
					auto: false,
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				},
				tasklist: [],
			}
		},
	
		methods: {
			navgoto(id) {
				uni.navigateTo({
					url: '/pages/task/detail?id='+id
				})
			},
			tabChange(e) {
				// console.log(e)
				this.tabIndex = e
				this.tasklist = [];
				this.mescroll.resetUpScroll();
			},
			downCallback() {
				// console.log('downCallback')
				// setTimeout(()=>{
				// 	this.mescroll.endSuccess()
				// },1500)	
				this.getcate() 
				this.mescroll.resetUpScroll()
			},
			//获取分类
			getcate(){
				this.$HttRequest({
					url: '/moonlight_category/lists',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.tabs = res.data
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg)
				})
			},
				
			upCallback(page) { 
				console.log(page.num)
				let cateid = 1
				if(typeof this.tabs[this.tabIndex]=='object'){
					cateid =  this.tabs[this.tabIndex].id
				}
				//console.log(cateid,this.tabs[this.tabIndex].id,'upcallback')
				this.getinitdata(page.num,cateid).then(res => {
					//console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.tasklist = [] //如果是第一页需手动制空列表
					this.tasklist = this.tasklist.concat(res) //追加新数据
				}).catch(error => {
					this.mescroll.endErr()
					this.$ShowMsg('error::' + JSON.stringify(error))
				})
			},
			getinitdata(page, cate_id) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/moonlight/lists',
						param: {
							category_id: cate_id,
							page: page
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.list.data);
							if(page==1){
								this.selfOrder = res.data.selfOrder
								//设置定时器
								if(res.data.selfOrder.length>0){
									//定时器获取ID数组
									if(this.interval.length>0){
										this.interval.map((time_tmp,time_index)=>{
											clearInterval(time_tmp)
										})
									}			
									//初始化定时器数组和时间提示
									this.interval=[]
									this.expire_time=[]
									res.data.selfOrder.map((order,oindex)=>{
										this.interval.push(0)
										this.expire_time.push('-分-秒')
									})
									//console.log(this.interval,this.expire_time)
									if(this.expire_time.length>0 && this.interval.length>0){
										res.data.selfOrder.map((order,oindex)=>{
											this.countdown(order.expiration_time,oindex)
										})
									}
								}
							}
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},
			countdown(expire_time,index) { 
				let date = expire_time;
				date = date.substring(0, 19);
				date = date.replace(/-/g, '/');
				console.log(date) 
				let endtime = new Date(date).getTime() / 1000;
				let dates = endtime - Date.parse(new Date()) / 1000;
				//console.log(dates 88220);
				//console.log(endtime,Date.parse(new Date()) / 1000)
				let minutes='';
				let seconds='';
				let hours='';
				this.interval[index] = setInterval(() => {
					hours = parseInt(dates / (60 * 60)).toString().length < 2 ? '0' + parseInt(dates / (60 * 60)) : parseInt(
						dates / (60 * 60));
					minutes = parseInt((dates % (60 * 60)) / 60).toString().length < 2 ? '0' + parseInt((dates % (60 * 60)) /
						60) : parseInt((dates % (60 * 60)) / 60);
					seconds = (dates % 60).toString().length < 2 ? '0' + dates % 60 : dates % 60;
					//console.log((dates % 60).toString().length);
					dates--;
					if (dates < 0) {
						clearInterval(this.interval[index]);
						console.log('时间已结束')
						this.$set(this.expire_time,index,'等待释放')
						return
					}
					this.$set(this.expire_time,index,hours>0?hours+'时'+minutes+'分'+seconds+'秒':minutes+'分'+seconds+'秒')
				}, 1000)
				//console.log(this.expire_time,this.interval[0])
			}
		}
	}
</script>

<style lang="scss">
	.task-contanier {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		margin: 0 auto;
		flex-direction: column;

		.task-title {
			margin: 20rpx 0;
			width: 100%;
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.task-desc {
				font-size: 32rpx;
				font-weight: bold;
			}

			.task-more {
				color: #e6594c;
				font-size: 25rpx;
			}
		}

		.task-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin: 20rpx 0;
			margin-bottom: 30rpx;
			position: relative;

			//放弃过
			.giveup {
				font-size: 18rpx;
				position: absolute;
				top: 0;
				left: 0;
				padding: 5rpx 10rpx;
				border-top-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				color: #fff;
				background-color: rgba(#000, 0.5);
				z-index: 1;
			}

			.task-item {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}

				.task-detail {
					display: flex;
					justify-content: flex-start;
					align-content: center;
					flex-direction: column;

					.task-app {
						color: #333;
						font-weight: bold;
						font-size: 30rpx;
					
					}
					.task-category{
						margin: 10rpx 0;
						background-color: #f7f7f7;
						color: #333;
						font-size: 22rpx;
						border-radius: 10rpx;
						width: 95rpx;
						padding: 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
					.task-count {
						font-size: 22rpx;
						color: #9e9e9e;

						.red-tip {
							color: #ee8078;
						}
					}
				}
			}

			.commission {
				color: #e6594c;
				font-size: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				
				.timer {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 25rpx;
					font-weight: normal;
					.small-size{
						font-size: 22rpx;
					}
				}
				.money {
					margin: 0 2rpx;
				}

				.add {
					font-weight: normal;
					font-size: 22rpx;

				}

				.yang {
					font-weight: normal;
					font-size: 23rpx;
				}
			}

		}

	}

	.box-border {
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #f8f8f8;
	}
</style>
